.sampleContainer{margin:100px}.loader{position:relative;width:44px;height:8px;margin:12px auto}.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:#ccc;position:absolute}.dot_1{animation:1.5s linear infinite animateDot1;left:12px;background:#e579b8}.dot_2{animation:1.5s linear .5s infinite animateDot2;left:24px}.dot_3{animation:1.5s linear infinite animateDot3;left:12px}.dot_4{animation:1.5s linear .5s infinite animateDot4;left:24px}@keyframes animateDot1{0%{transform:rotate(0) translateX(-12px)}25%,75%{transform:rotate(180deg) translateX(-12px)}100%{transform:rotate(360deg) translateX(-12px)}}@keyframes animateDot2{0%{transform:rotate(0) translateX(-12px)}25%,75%{transform:rotate(-180deg) translateX(-12px)}100%{transform:rotate(-360deg) translateX(-12px)}}@keyframes animateDot3{0%{transform:rotate(0) translateX(12px)}25%,75%{transform:rotate(180deg) translateX(12px)}100%{transform:rotate(360deg) translateX(12px)}}@keyframes animateDot4{0%{transform:rotate(0) translateX(12px)}25%,75%{transform:rotate(-180deg) translateX(12px)}100%{transform:rotate(-360deg) translateX(12px)}}